@mixin flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fplayer_playlist {
  width: 400px;
  height: 600px;
  padding: 5px;
  background: #fff;
  font-size: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 0 1px var(--border);
  position: absolute;
  right: 0;
  bottom: 60px;
  z-index: 9;

  .head {
    height: 50px;
    @include flex_center;

    .btn_warp {
      width: calc(100% - 100px);
      height: 40px;
      border-radius: 40px;
      @include flex_center;
      border: 1px solid var(--border);

      div {
        width: 50%;
        height: 100%;
        border-radius: 40px;
        @include flex_center;
        cursor: pointer;
      }
    }
  }
  .main{
    padding-top: 10px;
    height: calc(100% - 50px);
    overflow-y: scroll;
    tbody{
      color: var(--f-text-color);
    }
  }
  .table_name{
    cursor: pointer;
    color: initial;
  }
  .table_index{
    padding: 16px 0;
    text-align: center;
  }
}


.ani_enter {
  display: block;
  animation: slideInRight .4s;
}

.ani_leave {
  display: none;
  animation: slideInRight .4s reverse;
}
